/**
 * @Date 2023-02-24 13:46:57
 * @Remark
 */

// react
import React, { useEffect, useState } from "react";
// lib
import { Modal, Form, Input, Select } from "antd";
// components & widget
// config
import { MODULE_NAME } from "./config";
import { MODAL_STYLE } from "project/config";
import { INPUT_REQUIRED_RULE } from "project/validRules";
// store
import { observer } from "mobx-react";
import { state } from "./state";
// controller
import {
  addSource,
  // getProSourceLongPage,
  updateSource,
} from "./controller";
import { MIN_MAX_RULE } from "utils/validator";

function EditModal() {
  const [form] = Form.useForm();
  const show = state.editModalShow;
  const info = state.editInfo;
  const title = `${state.editInfo ? "编辑" : "新增"}${MODULE_NAME}`;

  const [showUploader, setUploader] = useState(false);

  const handleCancel = () => {
    state.editModal = false;
  };

  const handleOk = async () => {
    const result = await form.validateFields();
    if (info) {
      updateSource(result, info.sourceId);
    } else {
      addSource(result);
    }
  };

  const handleSourceChange = (value: string) => {
    // 根据选择的上级分类来决定是否显示图片上传
    if (value) {
      setUploader(true);
    }
    if (value === undefined) {
      setUploader(false);
    }
  };
  useEffect(() => {
    if (show) {
      form.resetFields();
      // getProSourceLongPage();
    }
    if (info) {
      form.setFieldsValue({
        ...info,
      });
    }
    return () => {
      form.resetFields();
    };
  }, [form, show, info]);

  return (
    <Modal
      title={title}
      open={show}
      onCancel={handleCancel}
      onOk={handleOk}
      destroyOnClose
      maskClosable
      forceRender
      okButtonProps={{
        loading: state.editModalLoading,
      }}
    >
      <Form {...MODAL_STYLE.FORM_6_15} form={form}>
        
        <Form.Item name="sourceName" label="来源名称" rules={[INPUT_REQUIRED_RULE,MIN_MAX_RULE(1,50)]}>
          <Input />
        </Form.Item>
        <Form.Item name="sourceContact" label="联系人" rules={[INPUT_REQUIRED_RULE,MIN_MAX_RULE(1,20)]} >
          <Input />
        </Form.Item>
        <Form.Item name="sourcePhone" label="联系电话" rules={[INPUT_REQUIRED_RULE,MIN_MAX_RULE(1,20)]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default observer(EditModal);
